import {designPage} from "@peryl/react-compose";
import {Box, Button, i18n, PageCard, PageCardContent, PageCardTitle, Paragraph} from "plain-design";
import {createEnum} from "@peryl/utils/createEnum";
import './micro-app-list-page.scss';
import {usePageService} from "../../modules/micro/usePageService";

const ApplicationTypes = createEnum(['main', 'sub'] as const);
const ApplicationFramework = createEnum(['react', 'vue2', 'vue3'] as const);
const ApplicationRouter = createEnum(['cache', 'router'] as const);
const ApplicationFrameMode = createEnum(['none', 'frame', 'iframe'] as const);
const ApplicationRenderMode = createEnum(['base', 'custom'] as const);
const ApplicationBuildTools = createEnum(['vuecli', 'cra', 'umi', 'vite'] as const);

interface iDemoAppMeta {
  name: string,
  type: typeof ApplicationTypes.TYPE,
  port: number,
  repository: string,
  framework: typeof ApplicationFramework.TYPE,
  buildTools: typeof ApplicationBuildTools.TYPE,
  route: typeof ApplicationRouter.TYPE,
  library: string,
  frameMode?: typeof ApplicationFrameMode.TYPE,
  renderMode?: typeof ApplicationRenderMode.TYPE,
  independentHomePage: boolean,
  excludeDependencies: string[],
  description: string[],
  pages?: { name: string, path: string }[]
}

export default designPage(() => {

  const _applications: iDemoAppMeta[] = [
    {
      name: 'micro-web-react-base',
      type: ApplicationTypes.main,
      port: 4001,
      repository: 'https://gitee.com/peryl/micro-web-react-base',
      buildTools: 'vuecli',
      framework: 'react',
      route: 'cache',
      library: 'plain-design(default purple)',
      frameMode: undefined,
      renderMode: undefined,
      independentHomePage: false,
      excludeDependencies: [],
      description: i18n.$intl('page.microAppListPage.micro-web-react-base.description').d('') as any
    },
    {
      name: 'micro-web-react-sub-vuecli',
      type: ApplicationTypes.sub,
      port: 4002,
      repository: 'https://gitee.com/peryl/micro-web-react-sub-vuecli',
      buildTools: ApplicationBuildTools.vuecli,
      framework: 'react',
      route: 'cache',
      library: 'plain-design(inherit)',
      frameMode: 'none',
      renderMode: 'base',
      independentHomePage: false,
      excludeDependencies: [
        'react',
        'react-dom',
        'plain-design',
        '@peryl/react-compose',
        'axios',
      ],
      description: i18n.$intl('page.microAppListPage.micro-web-react-sub-vuecli.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-react-sub-vuecli.pages').d('') as any
    },
    {
      name: 'micro-web-vue-sub-vuecli',
      type: ApplicationTypes.sub,
      port: 4003,
      repository: 'https://gitee.com/peryl/micro-web-vue-sub-vuecli',
      buildTools: ApplicationBuildTools.vuecli,
      framework: 'vue3',
      route: 'cache',
      library: 'plain-ui(blue)',
      frameMode: 'none',
      renderMode: 'custom',
      independentHomePage: false,
      excludeDependencies: [
        'vue3',
        'plain-ui-composition',
        'axios'
      ],
      description: i18n.$intl('page.microAppListPage.micro-web-vue-sub-vuecli.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-vue-sub-vuecli.pages').d('') as any
    },
    {
      name: 'micro-web-vue-sub-vuecli-router',
      repository: 'https://gitee.com/peryl/micro-web-vue-sub-vuecli-router',
      type: 'sub',
      port: 4004,
      framework: 'vue3',
      buildTools: 'vuecli',
      route: 'router',
      library: 'naive-ui / element-plus',
      frameMode: 'frame',
      renderMode: 'custom',
      independentHomePage: true,
      excludeDependencies: [],
      description: i18n.$intl('page.microAppListPage.micro-web-vue-sub-vuecli-router.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-vue-sub-vuecli-router.pages').d('') as any
    },
    {
      name: 'micro-web-react-sub-cra-router',
      repository: 'https://gitee.com/peryl/micro-web-react-sub-cra-router',
      type: 'sub',
      port: 4005,
      framework: 'react',
      buildTools: 'cra',
      route: 'router',
      library: 'semi-ui',
      frameMode: 'frame',
      renderMode: 'custom',
      independentHomePage: true,
      excludeDependencies: [],
      description: i18n.$intl('page.microAppListPage.micro-web-react-sub-cra-router.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-react-sub-cra-router.pages').d('') as any
    },
    {
      name: 'micro-web-vue-sub-vite-router',
      repository: 'https://gitee.com/peryl/micro-web-vue-sub-vite-router',
      type: 'sub',
      port: 4006,
      framework: 'vue3',
      buildTools: 'vite',
      route: 'router',
      library: 'view-ui-plus',
      frameMode: 'frame',
      renderMode: 'custom',
      independentHomePage: true,
      excludeDependencies: [],
      description: i18n.$intl('page.microAppListPage.micro-web-vue-sub-vite-router.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-vue-sub-vite-router.pages').d('') as any
    },
    {
      name: 'micro-web-react-sub-vite-router',
      repository: 'https://gitee.com/peryl/micro-web-react-sub-vite-router',
      type: 'sub',
      port: 4007,
      framework: 'react',
      buildTools: 'vite',
      route: 'router',
      library: 'tdesign-react',
      frameMode: 'frame',
      renderMode: 'custom',
      independentHomePage: true,
      excludeDependencies: [],
      description: i18n.$intl('page.microAppListPage.micro-web-react-sub-vite-router.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-react-sub-vite-router.pages').d('') as any
    },
    {
      name: 'micro-web-vue-sub-vite',
      repository: 'https://gitee.com/peryl/micro-web-vue-sub-vite',
      type: 'sub',
      port: 4008,
      framework: 'vue3',
      buildTools: 'vite',
      route: 'cache',
      library: 'plain-ui(pink)',
      frameMode: 'none',
      renderMode: 'custom',
      independentHomePage: false,
      excludeDependencies: ['vue', 'axios'],
      description: i18n.$intl('page.microAppListPage.micro-web-vue-sub-vite.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-vue-sub-vite.pages').d('') as any
    },
    {
      name: 'micro-web-react-sub-vite',
      repository: 'https://gitee.com/peryl/micro-web-react-sub-vite',
      type: 'sub',
      port: 4009,
      framework: 'react',
      buildTools: 'vite',
      route: 'cache',
      library: 'plain-design(inherit)',
      frameMode: 'none',
      renderMode: 'base',
      independentHomePage: false,
      excludeDependencies: ['react', 'react-dom', 'axios'],
      description: i18n.$intl('page.microAppListPage.micro-web-react-sub-vite.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-react-sub-vite.pages').d('') as any
    },
    {
      name: 'micro-web-vue-sub-iview-admin',
      repository: 'https://gitee.com/peryl/micro-web-vue-sub-iview-admin',
      type: 'sub',
      port: 4010,
      framework: 'vue2',
      buildTools: 'vuecli',
      route: 'router',
      library: 'iview',
      frameMode: 'frame',
      renderMode: 'custom',
      independentHomePage: true,
      excludeDependencies: [],
      description: i18n.$intl('page.microAppListPage.micro-web-vue-sub-iview-admin.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-vue-sub-iview-admin.pages').d('') as any
    },
    {
      name: 'micro-web-react-sub-arco-admin',
      repository: 'https://gitee.com/peryl/micro-web-react-sub-arco-admin',
      type: 'sub',
      port: 4011,
      framework: 'react',
      buildTools: 'cra',
      route: 'router',
      library: 'arco-design',
      frameMode: 'frame',
      renderMode: 'custom',
      independentHomePage: true,
      excludeDependencies: [],
      description: i18n.$intl('page.microAppListPage.micro-web-react-sub-arco-admin.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-react-sub-arco-admin.pages').d('') as any
    },
    {
      name: 'micro-web-vue-sub-element-admin',
      repository: 'https://gitee.com/peryl/micro-web-vue-sub-element-admin',
      type: 'sub',
      port: 4012,
      framework: 'vue2',
      buildTools: 'vuecli',
      route: 'router',
      library: 'element-ui',
      frameMode: 'frame',
      renderMode: 'custom',
      independentHomePage: true,
      excludeDependencies: [],
      description: i18n.$intl('page.microAppListPage.micro-web-vue-sub-element-admin.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-vue-sub-element-admin.pages').d('') as any
    },
    {
      name: 'micro-web-vue-sub-elementplus-admin',
      repository: 'https://gitee.com/peryl/micro-web-vue-sub-elementplus-admin',
      type: 'sub',
      port: 4013,
      framework: 'vue3',
      buildTools: 'vite',
      route: 'router',
      library: 'element-plus',
      frameMode: 'frame',
      renderMode: 'custom',
      independentHomePage: true,
      excludeDependencies: [],
      description: i18n.$intl('page.microAppListPage.micro-web-vue-sub-elementplus-admin.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-vue-sub-elementplus-admin.pages').d('') as any
    },
    /*{
      name: 'micro-web-vue-sub-element-plus',
      repository: 'https://gitee.com/peryl/micro-web-vue-sub-element-plus',
      type: 'sub',
      port: 4014,
      framework: 'vue3',
      buildTools: 'vite',
      route: 'cache',
      library: 'element-plus',
      frameMode: 'frame',
      renderMode: 'custom',
      independentHomePage: false,
      excludeDependencies: [],
      description: i18n.$intl('page.microAppListPage.micro-web-vue-sub-element-plus.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-vue-sub-element-plus.pages').d('') as any
    },*/
    {
      name: 'micro-web-react-sub-umi4-antdpro',
      repository: 'https://gitee.com/peryl/micro-web-react-sub-umi4-antdpro',
      type: 'sub',
      port: 4015,
      framework: 'react',
      buildTools: 'umi',
      route: 'router',
      library: 'ant-design pro',
      frameMode: 'iframe',
      renderMode: 'custom',
      independentHomePage: true,
      excludeDependencies: [],
      description: i18n.$intl('page.microAppListPage.micro-web-react-sub-umi4-antdpro.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-react-sub-umi4-antdpro.pages').d('') as any
    },
    {
      name: 'micro-web-react-sub-cra-router-antd',
      repository: 'https://gitee.com/peryl/micro-web-react-sub-cra-router-antd',
      type: 'sub',
      port: 4016,
      framework: 'react',
      buildTools: 'cra',
      route: 'router',
      library: 'ant-design',
      frameMode: 'frame',
      renderMode: 'custom',
      independentHomePage: true,
      excludeDependencies: [],
      description: i18n.$intl('page.microAppListPage.micro-web-react-sub-cra-router-antd.description').d('') as any,
      pages: i18n.$intl('page.microAppListPage.micro-web-react-sub-cra-router-antd.pages').d('') as any
    }
  ];

  const applications = _applications.map(i => ({
    ...i,
    homePage: !!i.independentHomePage ? (() => {
      const url = new URL(window.location.href);
      if (process.env.NODE_ENV !== 'production') {url.port = String(i.port);}
      url.pathname = `/${i.name}`;
      return url.href;
    })() : undefined
  }));

  const { nav } = usePageService();

  const openPage = (page: Exclude<iDemoAppMeta['pages'] | string, undefined>[number]) => {
    if (typeof page === "string") {
      window.open(page);
    } else {
      nav.openTab({ id: page.path, label: page.name, path: page.path });
    }
  };

  return () => (
    <>
      <PageCard>
        <PageCardTitle title={i18n.$intl('page.microAppListPage.pageTitle').d("微前端应用")}/>
        <PageCardContent>
          <Paragraph list="page.microAppListPage.introduces"/>
        </PageCardContent>
        <PageCardTitle title={i18n.$intl('page.microAppListPage.titleApplicationAttrs').d("应用属性")}/>
        <PageCardContent>
          <Paragraph list="page.microAppListPage.applicationAttrs"/>
        </PageCardContent>
      </PageCard>

      {applications.map((item) => (
        <PageCard key={item.name} className="app-list-page-item">
          <PageCardTitle title={item.name}/>
          <PageCardContent>
            <div className="app-list-page-tags">
              <Box className="app-list-page-tag-type">{i18n.$intl(`page.microAppListPage.ApplicationTypes.${item.type}`).d(item.type)}</Box>
              <Box className="app-list-page-tag-framework">{i18n.$intl(`page.microAppListPage.ApplicationFramework.${item.framework}`).d(item.framework)}</Box>
              <Box className="app-list-page-tag-build-tools">{i18n.$intl(`page.microAppListPage.ApplicationBuildTools.${item.buildTools}`).d(item.buildTools)}</Box>
              <Box className="app-list-page-tag-router">{i18n.$intl(`page.microAppListPage.ApplicationRouter.${item.route}`).d(item.route)}</Box>
              {item.frameMode && <Box className="app-list-page-tag-frame-mode">{i18n.$intl(`page.microAppListPage.ApplicationFrameMode.${item.frameMode}`).d(item.frameMode)}</Box>}
              {item.renderMode && <Box className="app-list-page-tag-render-mode">{i18n.$intl(`page.microAppListPage.ApplicationRenderMode.${item.renderMode}`).d(item.renderMode)}</Box>}
              <Box className="app-list-page-tag-library">{item.library}</Box>
              {item.independentHomePage && <Box className="app-list-page-tag-independent-home-page">{i18n.$intl('page.microAppListPage.independentHomePage').d('独立首页')}</Box>}
            </div>
            <div className="app-list-page-item-repository">
              {i18n.$intl('page.microAppListPage.repository').d('仓库地址')}:
              <a href={item.repository} target="_blank">
                <span>{item.repository}</span>
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewBox="0 0 24 24" width="24px" className="vt-link-icon">
                  <path d="M0 0h24v24H0V0z" fill="none"></path>
                  <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path>
                </svg>
              </a>
            </div>
            {!!item.excludeDependencies.length && ((
              <div className="app-list-page-item-exclude-dependencies">
                {i18n.$intl('page.microAppListPage.excludeDependencies').d('排除依赖')}: {item.excludeDependencies.join(', ')}
              </div>
            ))}
          </PageCardContent>
          <PageCardContent>
            <Paragraph list={item.description}/>
          </PageCardContent>
          {!!item.pages?.length && (
            <PageCardContent>
              {!!item.homePage && (
                <Button mode="text" status="error" key="home_page" onClick={() => openPage(item.homePage!)} className="app-list-page-button">
                  <span>{i18n.$intl('page.microAppListPage.openHomePage').d('打开首页')}</span>
                  <svg className="app-list-page-button-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 32L33 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M15 15H33V33" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </Button>
              )}
              {item.pages.map(subPage => (
                <Button mode="text" key={subPage.name} onClick={() => openPage(subPage)} className="app-list-page-button">
                  <span>{subPage.name}</span>
                  <svg className="app-list-page-button-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 32L33 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M15 15H33V33" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </Button>
              ))}
            </PageCardContent>
          )}
        </PageCard>
      ))}
    </>
  );
});
